<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <style>
        .red{
            color:red;
        }
        .green{
            color:green;
        }
    </style>

    <!-- Mobile Web-app fullscreen -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">

    <!-- Meta tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="favicon.ico">
    <title>Home</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="author" content="" />
    <!-- Facebook and Twitter integration -->
    <meta property="og:title" content=""/>
    <meta property="og:image" content=""/>
    <meta property="og:url" content=""/>
    <meta property="og:site_name" content=""/>
    <meta property="og:description" content=""/>
    <meta name="twitter:title" content="" />
    <meta name="twitter:image" content="" />
    <meta name="twitter:url" content="" />
    <meta name="twitter:card" content="" />

    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" rel="stylesheet"/>
    <link rel="stylesheet" media="all" href="${pageContext.request.contextPath}/css/font-awesome.css" />
    <link rel="stylesheet" media="all" href="${pageContext.request.contextPath}/css/furniture-icons.css" />
    <link rel="stylesheet" media="all" href="${pageContext.request.contextPath}/css/linear-icons.css" />
    <link rel="stylesheet" media="all" href="${pageContext.request.contextPath}/css/owl.carousel.css" />
    <link rel="stylesheet" media="all" href="${pageContext.request.contextPath}/css/ion-range-slider.css" />
    <link rel="stylesheet" media="all" href="${pageContext.request.contextPath}/css/theme1.css" />
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/product.css"/>
    <link rel="icon" href="favicon.ico">
    <!--Google fonts-->
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,600&amp;subset=latin-ext" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">

    <!-- Animate.css -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/animate.css">
    <!-- Icomoon Icon Fonts-->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/icomoon.css">
    <!-- Themify Icons-->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/themify-icons.css">
    <!-- Bootstrap  -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.css">

    <!-- Magnific Popup -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/magnific-popup.css">

    <!-- Owl Carousel  -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/owl.carousel.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/owl.theme.default.min.css">

    <!-- Theme style  -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css">


</head>
<body>

<div class="gtco-loader"></div>

<div id="page">
    <nav class="navbar-fixed">

        <div class="container">

            <!-- ==========  Top navigation ========== -->

            <div class="navigation navigation-top clearfix">
                <ul>
                    <li class="nav-settings">
                        <a href="javascript:void(0);" class="nav-settings-value">简体中文</a>
                        <ul class="nav-settings-list">
                            <li>简体中文</li>
                            <li>English</li>
                        </ul>
                    </li>
                </ul>
            </div> <!--/navigation-top-->

            <!-- ==========  Main navigation ========== -->

            <div class="navigation navigation-main">

                <!-- Setup your logo here-->

                <a href="${pageContext.request.contextPath}/GoodsServlet?method=ishot" class="logo"><img src="${pageContext.request.contextPath}/assets/images/logo.png" alt="" /></a>

                <!-- Mobile toggle menu -->

                <a href="#" class="open-menu"><i class="icon icon-menu"></i></a>

                <!-- Convertible menu (mobile/desktop)-->

                <div class="floating-menu">

                    <!-- Mobile toggle menu trigger-->

                    <div class="close-menu-wrapper">
                        <span class="close-menu"><i class="icon icon-cross"></i></span>
                    </div>

                    <ul>
                        <li><a href="${pageContext.request.contextPath}/GoodsServlet?method=ishot" id="gyyhome">首页</a></li>
                    </ul>
                </div> <!--/floating-menu-->
            </div> <!--/navigation-main-->
        </div> <!--/container-->
    </nav>

    <div class="page-inner">

        <header id="gtco-header" class="gtco-cover" role="banner" style="background-image: url(${pageContext.request.contextPath}/assets/images/gallery-1.jpg)">

            <div class="overlay"></div>
            <div class="gtco-container">

                <div class="row">
                    <div class="col-md-12 col-md-offset-0 text-left">
                        <div class="row row-mt-15em">
                            <div class="col-md-7 mt-text animate-box" data-animate-effect="fadeInUp">
                                <span class="intro-text-small">Welcome to Mobel</span>
                                <h1>Build Your Word using this Wonderful shop.</h1>
                            </div>
                            <div class="col-md-4 col-md-push-1 animate-box" data-animate-effect="fadeInRight" id="sss">
                                <div class="form-wrap">
                                    <div class="tab">
                                        <ul class="tab-menu">
                                            <li class="active gtco-first"><a href="#" data-tab="signup">注册</a></li>
                                            <li class="gtco-second"><a href="#" data-tab="login">登录</a></li>
                                        </ul>
                                        <div class="tab-content">

                                            <%--该部分为注册模块--%>
                                            <div class="tab-content-inner active" data-content="signup">
                                                <form method="post" action="${pageContext.request.contextPath }/UserServlet" id="form1">
                                                    <div class="row form-group">
                                                        <div class="col-md-12">
                                                            <label for="username">用户名</label> <span class='red' id="userspan"></span><br />
                                                            <input type="hidden" name="method" value="regist" />
                                                            <input type="text" tabindex="1" maxlength="30" autocomplete="off" class="form-control" id="username" name="name" value="${name}" placeholder="Name">
                                                        </div>
                                                    </div>

                                                    <div class="row form-group">
                                                        <div class="col-md-12">
                                                            <label for="email">邮箱</label> <span class='red' id="emailspan"></span><br />
                                                            <input type="email" class="form-control" id="email" placeholder="请输入邮箱"  tabindex="5" maxlength="20" name="email" >
                                                        </div>
                                                    </div>
                                                    <div class="row form-group">
                                                        <div class="col-md-12">
                                                            <label for="phone">手机号码</label>
                                                            <input type="hidden" name="sex" value="1"/> <span class='red' id="phonespan"></span><br />
                                                            <input type="phone" class="form-control" name="phone" id="phone" placeholder="Phone Number" autocomplete="off" tabindex="1" maxlength="11">
                                                        </div>
                                                    </div>
                                                    <div class="row form-group">
                                                        <div class="col-md-12">
                                                            <label for="password">密  码</label> <span class='red' id="pwdspan"></span><br />
                                                            <input type="password" tabindex="4" maxlength="20" class="form-control" name="password" id="password" placeholder="Password">
                                                        </div>
                                                    </div>
                                                    <div class="row form-group">
                                                        <div class="col-md-12">
                                                            <label for="repwd">确认密码</label>
                                                            <input type="password" tabindex="5" maxlength="20" class="form-control" id="repwd" name="password2" placeholder="Repeat Password">
                                                        </div>
                                                    </div>

                                                    <div class="row form-group">
                                                        <div class="col-md-12">
                                                            <input type="button" class="btn btn-primary" value="注册" id="gyyregist">
                                                        </div>
                                                        <div class="agree">
                                                            <input name="agree" id="autoLogin" checked="checked" type="checkbox" >
                                                            <label for="autoLogin">注册即表示同意<span><a href="" target="_blank">《用户服务协议》</a></span>条款</label>
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>

                                            <%--该部分为登录模块--%>
                                            <div class="tab-content-inner" data-content="login" id="form2">
                                                <form action="${pageContext.request.contextPath }/UserServlet" method="post">
                                                    <div class="row form-group">
                                                        <div class="col-md-12">
                                                            <label for="username">用户名</label><span class='red' id="user1span"></span>
                                                            <input type="hidden" name="method" value="login" />
                                                            <input type="text" class="form-control" id="username1" onchange="checkName1()" name="name" value="${name}" placeholder="Name">
                                                        </div>
                                                    </div>
                                                    <div class="row form-group">
                                                        <div class="col-md-12">
                                                            <label for="password">密码</label>
                                                            <input type="password" class="form-control" id="passwordl" name="password" value="${password}" placeholder="Password">
                                                        </div>
                                                    </div>

                                                    <div class="row form-group">
                                                        <div class="col-md-12">
                                                            <input type="submit" class="btn btn-primary" value="登录" id="gyylogin">
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </header>
        <!-- jQuery -->
        <script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
        <!-- jQuery Easing -->
        <script src="${pageContext.request.contextPath}/js/jquery.easing.1.3.js"></script>
        <!-- Bootstrap -->
        <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
        <!-- Waypoints -->
        <script src="${pageContext.request.contextPath}/js/jquery.waypoints.min.js"></script>
        <!-- Carousel -->
        <script src="${pageContext.request.contextPath}/js/owl.carousel.min.js"></script>
        <!-- countTo -->
        <script src="${pageContext.request.contextPath}/js/jquery.countTo.js"></script>
        <!-- Magnific Popup -->
        <script src="${pageContext.request.contextPath}/js/jquery.magnific-popup.min.js"></script>
        <script src="${pageContext.request.contextPath}/js/magnific-popup-options.js"></script>
        <!-- Main -->
        <script src="${pageContext.request.contextPath}/js/main1.js"></script>
    </div>
</div>
</body>
</html>

<script type="text/javascript">
    /*获得当前路径*/
    var path = '${pageContext.request.contextPath }';

    var validate={
        name_form: false,
        email_form:false,
        phone_form:false,
        password_form: false,
        name1_form: false

    };

    /*校验字符串长度*/
    function checkLength(str,min,max){
        if(str.length < min || str.length > max){
            return true;
        }else{
            return false;
            //$('#userspan').html('');
        }
    }

    /*验证姓名是否合法*/
    function checkName(){
        var username = $('#username').val();/*验证用户名*/
        $.get(path+'/UserServlet',{method:"isHave",name:username}, function (data) {

            $.each(data,function (i,n) {
                if(n.code==1)
                {
                    $('#userspan').html("该用户名已存在");
                    validate.name_form = false;
                    return false;
                }else
                {
                    if(checkLength(username,3,16)){
                        $('#userspan').html('该用户名不合法');
                        $('#userspan').attr('class','red');
                        validate.name_form = false;
                        return false;
                    }else{
                        $('#userspan').html(' √这个名字真棒！');
                        $('#userspan').attr('class','green');
                        validate.name_form = true;
                        return true;
                    }
                }
            })
        },"json")
    }

    /*验证电话号码是否合法*/
    function checkPhone(){
        var userphone = $('#phone').val();
        $.get(path+'/UserServlet',{method:"isHave",phone:userphone}, function (data) {
            $.each(data,function (i,n) {
                if(n.code==1)
                {
                    $('#phonespan').html("该手机号码已存在");
                    $('#phonespan').attr('class','red');
                    validate.phone_form = false;
                    return false;
                }else
                {
                    if(checkLength(phone,13,13)){
                        $('#phonespan').html('该手机号码不合法');
                        validate.phone_form = false;
                        $('#phonespan').attr('class','red');
                        return false;
                    }else{
                        $('#phonespan').html(' √');
                        validate.phone_form = true;
                        $('#phonespan').attr('class','green');
                        return true;
                    }
                }

            })
        },"json")
    }

    /*验证邮箱是否合法*/
    function checkEmail(){
        var useremail = $('#email').val();
        $.get(path+'/UserServlet',{method:"isHave",email:useremail}, function (data) {
            $.each(data,function (i,n) {
                if(n.code==1)
                {
                    $('#emailspan').html("该邮箱已存在");
                    $('#emailspan').attr('class','red');
                    validate.email_form = false;
                    return false;
                }else
                {
                    if(checkLength(username,3,16)){
                        $('#emailspan').html('该邮箱不合法');
                        validate.email_form = false;
                        $('#emailspan').attr('class','red');
                        return false;
                    }else{
                        $('#emailspan').html('  √');
                        validate.email_form = true;
                        $('#emailspan').attr('class','green');
                        return true;
                    }
                }

            })
        },"json")
    }


    function checkRePwd(){
        var password = $('#password').val();
        var rep = $('#repwd').val();
        //console.log(password);
        //console.log(rep);
        if(password != rep){
            $('#pwdspan').html('两次密码输入不一致');
            validate.password_form = false;
            return false;
        }else{
            $('#pwdspan').html('√');
            $('#pwdspan').attr('class','green');
            validate.password_form = true;
            return true;
        }
    }
    function checkName1(){
        var username = $('#username1').val();/*验证用户名*/
        $.get(path+'/UserServlet',{method:"isHave",name:username}, function (data) {

            $.each(data,function (i,n) {
                if(n.code!=1)
                {
                    $('#user1span').html("该用户名不存在");
                    validate.name1_form = false;
                    return false;
                }else {
                    $('#user1span').html("");
                    validate.name1_form = true;
                    return true;
                }
            })
        },"json")
    }



    /**
     * 下面四句为 当输入框发生变化时
     */
    $('#username').change(checkName);
    $('#phone').change(checkPhone);
    $('#email').change(checkEmail);
    $('#repwd').change(checkRePwd);

    /*注册按钮点击*/
    $('#gyyregist').click(function () {
        var isok = validate.password_form && validate.email_form && validate.phone_form && validate.name_form;
        if (isok&&($("input[type='checkbox']").is(':checked'))) {
            console.log('aaa');
          $('#form1').submit();
        }else {
            alert("Fail Regist!");
            return false;
        }
    }
    )
    $('#gyylogin').click(function () {
            var isok =validate.name1_form;
            if (isok) {
                console.log('aaa');
                $('#form2').submit();
            }else {
                alert("用户名不存在");
                return false;
            }
        }
    )
</script>
